<template>
	<view>
		<navbar title="我的钱包" :autoBack="true"></navbar>
		<scroll-view scroll-y="true" class="scbox">
			<view class="con">
				<view class="" style="padding: 30rpx;">
					<view class="con__topbox">
						<view class="con__topbox__title">
							我的余额
						</view>
						<view class="con__topbox__num">
							<text style="font-size: 36rpx;">￥</text>{{money}}
						</view>
					</view>
				</view>

				<view class="con__box">
					<view class="con__box__top">
						<view class="u-flex u-flex-y-center">
							<view class="con__box__top__ti">
								消费明细
							</view>
						</view>
						<view class="u-flex u-flex-y-center" @click="navto('/pages/personal/withdrawal')">
							<image src="/static/daikuan/tx.png" class="con__box__top__icon" mode=""></image>
							<view class="con__box__top__tip">
								提现
							</view>
						</view>
					</view>
					<view class="con__box__tabs">
						<view class="con__box__tabs__item" @click="curindex=index,getlist(item.type)" v-for="(item,index) in tablist"
							:key="index" :class="curindex==index?'active':''">
							{{item.name}}
						</view>
					</view>
					<view class="con__box__list" v-if="list.length>0">
						<view class="con__box__list__item" v-for="(item,index) in list" :key="index">
							<view class="">
								<view class="con__box__list__item__name">
									{{tablist[curindex].name}}已到账
								</view>
								<view class="con__box__list__item__time">
									<!-- 2023-04-11 14:38:54 -->
									{{$u.timeFormat(item.createtime, 'yyyy-mm-dd hh:MM:ss')}}
								</view>
							</view>
							<view class="con__box__list__item__price">
								￥{{item.price}}
							</view>
						</view>
					</view>
					<u-empty mode="list" v-else>
					</u-empty>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import user from '@/api/_user.js'
	export default {
		data() {
			return {
				tablist: [{
						name: '提现',
						type:2
					},
					{
						name: '收入',
						type:1
					},
				],
				curindex: 0,
				money:0,
				list:[]
			};
		},
		onLoad() {
			this.money=uni.getStorageSync('dkuserinfo').money
			this.getlist(2)
		},
		methods:{
			async getlist(type){
				this.list=[]
				let res = await user.myWallet({type})
				if(res.data.code==1){
					this.list=res.data.data
				}
			}
		},
		
	}
</script>

<style lang="scss">
	.con {
		&__topbox {
			padding: 66rpx 30rpx;
			background-color: #3262fd;
			border-radius: 30rpx;

			&__title {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #FFFFFF;
				line-height: 28rpx;
				margin-bottom: 42rpx;
			}

			&__num {
				font-family: PingFang SC;
				font-weight: 800;
				font-size: 56rpx;
				color: #FFFFFF;
				line-height: 42rpx;
			}
		}

		&__box {
			padding: 30rpx;

			// background-color: #fff;
			&__top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 0 26rpx 14rpx;

				&__ti {
					font-family: PingFang SC;
					font-weight: 800;
					font-size: 28rpx;
					color: #161B1F;
					line-height: 31rpx;
				}

				&__icon {
					width: 30rpx;
					height: 30rpx;
					margin-right: 8rpx;
				}

				&__tip {
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 24rpx;
					color: #161B1F;
					line-height: 36rpx;
				}
			}

			&__tabs {
				height: 83rpx;
				border-radius: 20rpx;
				border: 3rpx solid #F5F5F5;
				display: flex;
				align-items: center;
				overflow: hidden;
				margin-bottom: 7rpx;

				&__item {
					font-family: PingFang SC;
					font-weight: 800;
					font-size: 28rpx;
					color: #2C2C2C;
					line-height: 28rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					height: 83rpx;
					width: 50%;
					background-color: #fff;
				}

				.active {
					background-color: #F5F5F5;
				}
			}

			&__list {
				padding-top: 7rpx;

				&__item {
					padding: 40rpx 0 29rpx 16rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1rpx solid #F4F4F4;

					&__name {
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 26rpx;
						color: #2C2C2C;
						line-height: 26rpx;
					}

					&__time {
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 22rpx;
						color: #888888;
						line-height: 18rpx;
						margin-top: 17rpx;
					}

					&__price {
						font-family: PingFang SC;
						font-weight: 800;
						font-size: 29rpx;
						color: #313131;
					}
				}

			}
		}
	}
</style>